import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'

interface NavBarProps {
  items: string[]
  current: number
  onItemClick: (index: number) => void
}

const NavBar = ({ items, current, onItemClick }: NavBarProps) => {
  let bottomSafe = 0
  try {
    const systemInfo = Taro.getSystemInfoSync()
    bottomSafe = systemInfo.statusBarHeight || 0
  } catch (error) {
    console.error('获取状态栏高度失败:', error)
    bottomSafe = 0
  }

  return (
    <View 
      className='nav-bar'
      style={{
        paddingBottom: `${bottomSafe > 0 ? 10 : 0}px`
      }}
    >
      {items.map((item, index) => (
        <View
          key={index}
          className={`nav-item ${current === index ? 'active' : ''}`}
          onClick={() => onItemClick(index)}
        >
          <Text className='nav-text retro-font'>{item}</Text>
          {current === index && <View className='nav-indicator' />}
        </View>
      ))}
    </View>
  )
}

export default NavBar

